<template>
	<view class="container">
		<!-- 搜索框 -->
		<u-search v-model="searchKey" placeholder="搜索研学地点" :show-action="true" action-text="搜索" @search="handleSearch"
			@custom="handleSearch" class="animated-item" style="animation-delay: 0.1s">
		</u-search>

		<!-- 地点列表 -->
		<scroll-view scroll-y class="list-container">
			<view 
				v-for="(item, index) in locationList" 
				:key="item.locationId" 
				class="location-item animated-item" 
				@click="toDetail(item)"
				:style="{animationDelay: `${0.2 + index*0.1}s`}"
			>
				<!-- 图片部分 -->
				<u-image :src="item.cover_image" width="120px" height="120px" mode="aspectFill"></u-image>
				<!-- 文字描述部分 -->
				<view class="info-box">
					<text class="name">{{ item.name }}</text>
					<u-rate class="rate" :value="item.rating" readonly size="16"></u-rate>
					<view class="address-line">
						<u-icon name="map" size="28"></u-icon>
						<text class="address">{{ item.address }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-empty v-if="locationList.length === 0" mode="search" class="animated-item" style="animation-delay: 0.3s"></u-empty>
	</view>
</template>

<script>
	import {
		listStudylocation,
	} from '@/api/studytourism/studylocation'
	export default {
		data() {
			return {
				searchKey: '',
				locationList: []
			};
		},
		onLoad() {
			this.getLocationList()
		},
		methods: {
			handleSearch() {
				this.getLocationList(this.searchKey)
			},
			async getLocationList(keyword = '') {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					name: keyword
				}
				const res = await listStudylocation(params)
				if (res.code === 200) {
					this.locationList = res.rows.map(item => ({
						...item,
						cover_image: `http://localhost:8080${item.coverImage}`
					}))
				}
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/index/studyLocation/locationDetail?locationId=${item.locationId}`
				})
			}
		}
	};
</script>

<style lang="scss">
	.container {
		overflow: hidden;
		background: #fff;
		font-size: 14px;
		padding: 15px;
		height: 100vh;
	}

	.search-box {
		margin-bottom: 15px;
	}

	.list-container {
		height: calc(100vh - 100px);
		.location-item {
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			margin-bottom: 15px;
			padding: 15px;
		}
	}

	.info-box {
		margin-left: 15px;
		display: flex;
		flex-direction: column;
		.rate {
			padding: 15rpx 0;
		}
	}

	.name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.address-line {
		display: flex;
		align-items: center;
		margin-top: 5px;
	}

	.address {
		margin-left: 10px;
	}

	/* 新增动画样式 */
	.animated-item {
		opacity: 0;
		animation: fadeInUp 0.6s ease forwards;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>